<div style="text-align: center;">
    string<br><textarea id="string" type="text" style="width: 800px; height: 200px;"></textarea>
    <br>
    <br>
    unicode<br><textarea id="unicode" type="text" style="width: 800px; height: 200px"></textarea>
</div>

<script>
    /** @param { string } str */
    function encodeUnicode(str) {
        return str.split("").map(char =>
            /[\u3002\uff1b\uff0c\uff1a\u201c\u201d\uff08\uff09\u3001\uff1f\u300a\u300b\u4e00-\u9fa5]/.test(char) ?
                `\\u${
                    parseInt(
                        char.charCodeAt(0),
                        10
                    ).toString(16)
                }`
            :
                char
        ).join("");
    }

    /** @param { string } str */
    function decodeUnicode(str) {
        return str.replace(/\\u([0-9a-fA-F]{4})/g,
            (full, char) => String.fromCharCode(
                parseInt(char, 16).toString(10)
            )
        );
    }

    const ipt_string = document.querySelector("#string");
    const ipt_unicode = document.querySelector("#unicode");

    ipt_string.addEventListener("input", () => {
        ipt_unicode.value = encodeUnicode(ipt_string.value);
    });

    ipt_unicode.addEventListener("input", () => {
        ipt_string.value = decodeUnicode(ipt_unicode.value);
    });
</script>